<template>
  <div class="list" >
    <div class="box">
      <div class="header">
        <div class="item-text box-title">企业规模</div>
      </div>
      <div>
        <div class="condition-item">
          <div class="condition-item-title">已选条件</div>
          <div class="condition-item-right">
            <el-tag class="tag"
                    v-for="tag in selected"
                    :key="tag.label"
                    closable
                    @close="handleClose(tag)">
              {{ tag.name+': '+ tag.label }}
            </el-tag>
          </div>
        </div>
        <div class="condition-item">
          <div class="condition-item-title">筛选条件</div>
          <div
              class="condition-item-right"
              v-for="item in filter"
              :key="item.key"
          >
            <el-select
                v-model="item.index"
                size="small"
                @change="change"
                :placeholder="item.name"
            >
              <el-option
                  v-for="data in item.data"
                  :key="data.value"
                  :label="data.label"
                  :value="data"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-bottom: 24px"></div>
    <div class="box" v-loading="loading">
      <div class="chart-title">单位(户)</div>
      <Chart ref="chart"></Chart>
    </div>
    <div style="margin-bottom: 24px"></div>
    <div class="box" v-loading="loading">
      <el-table
          class="list-table"
          stripe
          border
          :data="tableData"
          style="width: 100%"
      >
        <el-table-column prop="key_as_string" label="分析维度" width="180">
        </el-table-column>
        <el-table-column prop="doc_count" label="企业数量（户）"></el-table-column>
        <el-table-column prop="hangye"  :show-overflow-tooltip="true" label="行业">

        </el-table-column>
        <el-table-column label="所占比例">
          <template slot-scope="scope">
            <el-progress :percentage="scope.row.bili"></el-progress>
          </template>
        </el-table-column>
      </el-table>
      <!-- <page
        :total="total"
        :current.sync="condition.page"
        :size.sync="condition.size"
        @change="search"
      />-->
    </div>
  </div>
</template>

<script>
import Chart from "./components/duo";
import {fetchRegion,fetchMapcompanyChenglifilter,fetchChengli, fetchIndustry, fetchStatus} from "@/api";
import Page from "@/components/list/page";
import Api from "@/api/companyMap";
import {deepClone} from  "@/utils/tools"
export default {
  components: {
    Page,
    Chart,
  },
  data() {
    return {
      total: 100,
      tableData: [
        {
          id: 123,
        },
      ],
      hangye:[],
      zhuce_index: "", //注册资金
      status: "", //企业状态
      statusList: [],
      selected: [],
      zhuce: [
        {
          value: 0,
          label: "全部",
        },
        {
          value: 2,
          label: "0-10万元",
        },
      ],
      filter: [
        {
          key: "zhuce",
          index: "",
          name: "注册金额",
          data: [
            {
              value: 0,
              label: "全部",
              key: 'zhuce'
            },
            {
              value: 2,
              label: "0-10万元",
              key: 'zhuce'
            },
          ],
        },
        {
          key: "status",
          index: "",
          name: "企业状态",
          data: [
            {
              value: 0,
              label: "不知道",
              key: "status",
              name: "企业状态",
            },
            {
              value: 2,
              key: "status",
              label: "不知道3",
            },

          ],
        },
      ],
      hello: "33",
      params: {
        page: 1,
        pagesize: 10,
        fenxi: 1,
        lat: "",
        lng: "",
        radius: "",
      },
      loading: true,
      condition: {
        page: 1,
        size: 10,
      },
    };
  },
  created() {
    this.params.radius = this.$route.query.radius;
    this.params.lat = this.$route.query.lat;
    this.params.lng = this.$route.query.lng;
    this.params.map = this.$route.query.map;
    this.getConfig()
    this.search();

  },

  methods: {
    getConfig(){
      Api.fetchMapcompanyChenglifilter({},success=>{
        this.filter=success
      })
    },
    //上方标签触发
    handleClose(tag) {
      console.log(tag);
      this.filter.forEach((item, index) => {
        if (JSON.stringify(item.index) === JSON.stringify(tag)) {
          console.log('判断相等')
          this.filter[index].index = ''
        }
      })
      this.selected.splice(this.selected.indexOf(tag), 1);

      this.search()
    },
    getStatus() {
      fetchStatus((res) => {
        this.statusList = res.data;
      });
    },
    getSelect() {
      let params = []
      this.selected.forEach((item) => {
        if (params[item.key] == undefined) {
          this.params[item.key]=''
          params[item.key] = ''
          params[item.key]=item.value
        }
      })
      return params
    },
    //改变状态
    change(event) {
      console.log(event)
      this.selected.forEach((item,index)=>{
        if( item.key==event.key){
          this.selected.splice(index ,1)
        }
      })
      let index = this.selected.indexOf(event);
      if (index == -1) {
        this.selected.push(event);
      }
      this.search()
    },
    search() {
      let params = {}
      this.loading=true
      console.log('params1', this.params)
      params = Object.assign(this.params, this.getSelect())
      console.log('params', params)
      Api.fetchMapjiegou(
          params,
          (res) => {
            if (res.code == 200) {
              let data= deepClone(res.data.company)
              let count=0
              data.forEach((item,index)=>{
                count+=item.doc_count
              })
              data.forEach((item,index)=>{
                data[index].bili= parseFloat(((item.doc_count/count)*100).toFixed(2))
              })
              data.unshift({key_as_string:'全部汇总',doc_count:count,hangeye:'',bili:100})
              this.tableData = data;
              this.hangye=res.data.hangye
              this.$refs.chart.changeData(res.data.company);
              this.loading=false
            }
          },
          (err) => {
            this.loading = false;
          }
      )
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/map/analysis/index";
</style>

<style>
.el-table thead {
  color: #2f3133;
}

.el-table th {
  background-color: #f5f7f9;
}

.chart-title {
  margin-left: 16.5px;

  font-size: 12px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #4d4d4d;
  line-height: 39px;
}

.tag {
  margin-right: 8px;
}

.search {
  display: flex;
  align-items: center;
}

.condition-item {
  height: 59px;
  align-items: center;
  margin-left: 24px;
  display: flex;
}

.condition-item-title {
  font-size: 11px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #606266;
  line-height: 60px;
}

.condition-item-right {
  margin-left: 12.75px;
}

.condition-item-selected {
  height: 24px;
  background: #ffffff;
  border: 1px solid #0076fe;
  border-radius: 2px;
  padding-left: 11.25px;
  padding-top: 6.75px;
  padding-bottom: 6.75px;
  padding-right: 11.25px;
  font-size: 11px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #0076fe;
  display: flex;
  align-items: center;
}
</style>
